<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <#include "_css.ftl">
    <style>
        .layui-layout-admin .layui-header {
            height: 60px;
            border-bottom: 1px solid #c42e2e;
            background-color: #c42e2e;
        }

        .layui-header .layui-nav {
            position: absolute;
            right: 0;
            top: 0;
            padding: 0;
            background: none;
        }

        .layui-header p {
            font-size: x-large;
            color: #fff;
            position: absolute;
            left: 20px;
        }

        .layui-nav-bar {
            background-color: #ff5722;
        }

        .layui-bg-black {
            background-color: #f5f6fa !important;
        }

        .layui-nav {
            background-color: #f5f6fa;
        }

        .layui-nav-tree .layui-nav-bar {
            width: 5px;
            height: 0;
            background-color: white;
        }

        .layui-nav-tree .layui-nav-item h3 {
            color: black;
            font-size: x-large;
            font-weight: bold;
            margin-left: 22px;
        }

        .layui-nav-tree .layui-nav-item a {
            color: black;
            font-size: large;
        }

        .layui-nav-tree .layui-nav-item a:hover {
            color: black;
            background-color: white;
        }

        .layui-form-pane .layui-form-label {
            width: 60px;
        }

        .site-title fieldset {
            border-top: none;
        }

        .layui-row p {
            margin-left: 35px;
        }

        .layui-layout-admin .layui-body {
            bottom: 0;
        }

        .laytable-cell-3-0-3{
            height: 100%;
        }

        .layui-table-cell{
            text-align: center;
        }
    </style>
</head>
<body class="layui-layout-body" style="background-color: #F5F6FA;">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><p>远联公益系统</p></div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="">消息</a></li>
            <li class="layui-nav-item"><a href="">需要帮助</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="/images/${user.headImg}" class="layui-nav-img">
                    ${user.name}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">修改信息</a></dd>
                    <dd><a href="/logout">退出</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black" style="margin-top: 7px">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item"><h3>通用模块</h3></li>
                <li class="layui-nav-item"><a href="">个人档案</a></li>
                <li class="layui-nav-item"><a href="">其他模块</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <h3 style="font-size: 20px;font-weight: 500;">个人档案</h3>
                </div>
                <div class="layui-col-md9">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="like[write]" title="档案名册">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-row  layui-col-space30" style="background-color: white; margin-top: 20px">
                <div style="background-color:white;position: absolute;border-top: 2px solid white;border-left: 2px solid white;width: 50%;height: 80%;z-index: 996;">
                    <div class="layui-row">
                        <form class="layui-form  layui-form-pane" action="/aaa">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <input type="text" name="keyword" required placeholder="关键字检索" autocomplete="off"
                                           class="layui-input" lay-filter="keyword" id="keyword">
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">地区</label>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <select name="area" lay-filter="area">
                                            <option value="">全部</option>
                                            <option value="北京">北京</option>
                                            <option value="上海">上海</option>
                                            <option value="杭州">杭州</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-inline" style="width: 100px;">
                                        <select name="sex" lay-filter="sex">
                                            <option value="-1">全部</option>
                                            <option value="0">男</option>
                                            <option value="1">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="search_form"
                                            type="submit">搜索
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-row">
                        <h3>搜索结果</h3>
                    </div>
                    <div class="layui-row">
                        <table lay-filter="person_table" id="person_table">
                        </table>
                    </div>
                </div>
                <div id="person_info"
                     style="background-color: white;border-left: 2px solid #F5F6FA;border-top: 2px solid white;position: absolute;width: 50%;height: 80%;right: 0;z-index: 996;">

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="barTemplate">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="activityImgTemplate">
    <img src="/images/{{d.imgPath}}" style="max-width: 100px;max-height: 100px;">
</script>

</body>
<#include "_js.ftl">
<script>
    $(function () {


        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;

        //第一个实例
        var personTable = table.render({
            elem: '#person_table'
            , url: '/person/list' //数据接口
            , page: true //开启分页
            , limit: 10
            , cols: [[ //表头
                {title: '编号', type: 'radio'},
                {field: 'id', title: '编号', sort: true}
                , {field: 'name', title: '姓名'}
                , {field: 'state', title: '状态'}
                , {field: 'teacherName', title: '指导老师'}
            ]]
        });

        form.on('submit(search_form)', function (data) {
            table.reload('person_table', {
                url: '/person/list'
                , where: data.field //设定异步数据接口的额外参数
                //,height: 300
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //选中一个person
        table.on('radio(person_table)', function (obj) {
            refreshALl(obj, personTable);
        });
    });

    function refreshALl(obj, personTable) {
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;

        $('#person_info').empty();
        $.get('/person/get_one', {'id': obj.data.id}, function (res) {
            $('#person_info').append(res);

            //初始化日记表格
            var dairyTable = table.render({
                elem: '#diary_table'
                , url: '/diary/list' //数据接口
                , where: {id: obj.data.id}
                , page: true //开启分页
                , limit: 20
                , cols: [[ //表头
                    {field: 'id', title: '编号', hide: true}
                    , {field: 'date', title: '日期'}
                    , {field: 'content', title: '日记'}
                    , {fixed: 'right', align: 'center', toolbar: '#barTemplate'}
                ]]
            });

            //初始化公益活动表格
            var activityTable = table.render({
                elem: '#activity_table'
                , url: '/activity/list' //数据接口
                , where: {id: obj.data.id}
                , page: true //开启分页
                , limit: 20
                , cols: [[ //表头
                    {field: 'id', title: '编号', hide: true}
                    , {field: 'date', title: '活动时间'}
                    , {field: 'content', title: '活动内容'}
                    , {field: 'imgPath', title: '活动照片', templet: '#activityImgTemplate'}
                    , {fixed: 'right', align: 'center', toolbar: '#barTemplate'}
                ]]
            });

            //初始化日记 日期筛选框
            laydate.render({
                elem: '#diary_date_filter', //指定元素,
                type: 'month',
                done: function (value, date, endDate) {
                    table.reload('diary_table', {
                        url: '/diary/list'
                        , where: {id: obj.data.id, date: value} //设定异步数据接口的额外参数
                    });
                }
            });

            //初始化公益活动 日期筛选框
            laydate.render({
                elem: '#activity_date_filter', //指定元素,
                type: 'month',
                done: function (value, date, endDate) {
                    table.reload('activity_table', {
                        url: '/activity/list'
                        , where: {id: obj.data.id, date: value} //设定异步数据接口的额外参数
                    });
                }
            });

            //渲染layui表单元素
            form.render();

            //修改个人信息
            $('#person_info_edit').click(function () {
                var id = $('#person_id').val();
                $.get('/person/get_form', {id: id}, function (str) {
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['1200px', '600px'], //宽高
                        content: str,
                        success: function (layero, index) {
                            form.render();
                            form.on('submit(person_info_submit)', function (data) {
                                $.ajax({
                                    url: '/person/edit',
                                    type: 'POST',
                                    data: data.field,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.msg(res.msg);
                                            console.log(personTable);
                                            personTable.reload();
                                            refreshALl(obj,personTable);
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    },
                                    error: function (res) {
                                        console.log(res);
                                    }
                                });
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                        }
                    });
                });
            });

            //修改罪案记录
            $('#crime_edit').click(function () {
                var id = $('#person_id').val();
                $.get('/crime/get_form', {id: id}, function (str) {
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['1200px', '600px'], //宽高
                        content: str,
                        success: function (layero, index) {
                            //执行一个laydate实例
                            laydate.render({
                                elem: '#crime_time' //指定元素
                            });
                            //提交请求
                            form.on('submit(crime_info_submit)', function (data) {
                                $.ajax({
                                    url: '/crime/edit',
                                    type: 'POST',
                                    data: data.field,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.msg(res.msg);
                                            personTable.reload();
                                            refreshALl(obj,personTable);
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    },
                                    error: function (res) {
                                        console.log(res);
                                    }
                                });
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                        }
                    });
                });
            });

            //添加日记
            $('#upload_diary_btn').click(function () {
                var id = $('#person_id').val();
                $.get('/diary/get_empty_form', {id: id}, function (str) {
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['1200px', '600px'], //宽高
                        content: str,
                        success: function (layero, index) {
                            laydate.render({
                                elem: '#diary_date' //指定元素
                            });
                            //提交请求
                            form.on('submit(diary_submit)', function (data) {
                                diaryData = data.field;
                                diaryData['personId'] = $('#person_id').val();
                                $.ajax({
                                    url: '/diary/add',
                                    type: 'POST',
                                    data: diaryData,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.msg(res.msg);
                                            layer.close(index);
                                            dairyTable.reload();
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    },
                                    error: function (res) {
                                        console.log(res);
                                    }
                                });
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                        }
                    });
                });
            });

            //修改删除日记
            table.on('tool(diary_table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('是否确定删除', function (index) {
                        $.get('/diary/delete', {id: data.id}, function (data) {
                            obj.del();
                            layer.close(index);
                            dairyTable.reload();
                        });

                    });
                } else if (obj.event === 'edit') {
                    $.get('/diary/get_form', {id: data.id}, function (str) {
                        layer.open({
                            title: '编辑',
                            type: 1,
                            area: ['1200px', '600px'], //宽高
                            content: str,
                            success: function (layero, index) {
                                //执行一个laydate实例
                                laydate.render({
                                    elem: '#diary_date' //指定元素
                                });
                                //提交请求
                                form.on('submit(diary_submit)', function (data) {
                                    $.ajax({
                                        url: '/editDiary',
                                        type: 'POST',
                                        data: data.field,
                                        dataType: 'json',
                                        success: function (res) {
                                            if (res.code === 0) {
                                                layer.msg(res.msg);
                                                layer.close(index);
                                                dairyTable.reload();
                                            } else {
                                                layer.msg(res.msg)
                                            }
                                        },
                                        error: function (res) {
                                            console.log(res);
                                        }
                                    });
                                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                });
                            }
                        });
                    });
                }
            });

            //添加公益活动
            $('#upload_activity_btn').click(function () {
                var id = $('#person_id').val();
                $.get('/activity/get_empty_form', {id: id}, function (str) {
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['1200px', '600px'], //宽高
                        content: str,
                        success: function (layero, index) {
                            imageUploaderSetup();
                            //执行一个laydate实例
                            laydate.render({
                                elem: '#activity_date' //指定元素
                            });
                            //提交请求
                            form.on('submit(activity_submit)', function (data) {
                                var formFile = new FormData();
                                formFile.append("id", data.field.id);
                                formFile.append("date", data.field.date);
                                formFile.append("content", data.field.content);
                                formFile.append("personId", $('#person_id').val());
                                // 遍历图片imgFile添加到formFile里面
                                $.each(imgFile, function (i, file) {
                                    formFile.append('files', file);
                                });
                                $.ajax({
                                    url: '/activity/add',
                                    type: 'POST',
                                    data: formFile,
                                    async: true,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    // traditional:true,
                                    dataType: 'json',
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.msg(res.msg);
                                            activityTable.reload();
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg)
                                        }
                                    },
                                    error: function (res) {
                                        console.log(res);
                                    }
                                })
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                        }
                    });
                });
            });

            //修改删除公益活动
            table.on('tool(activity_table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('是否确定删除', function (index) {
                        $.get('/activity/delete', {id: data.id}, function (data) {
                            obj.del();
                            layer.close(index);
                            activityTable.reload();
                        });
                    });
                } else if (obj.event === 'edit') {
                    $.get('/activity/get_form', {id: data.id}, function (str) {
                        layer.open({
                            title: '编辑',
                            type: 1,
                            area: ['1200px', '600px'], //宽高
                            content: str,
                            success: function (layero, index) {
                                imageUploaderSetup();
                                //执行一个laydate实例
                                laydate.render({
                                    elem: '#activity_date' //指定元素
                                });
                                //提交请求
                                form.on('submit(activity_submit)', function (data) {
                                    // FormData上传图片
                                    var formFile = new FormData();
                                    formFile.append("id", data.field.id);
                                    formFile.append("date", data.field.date);
                                    formFile.append("content", data.field.content);
                                    formFile.append("personId", $('#content').val());
                                    // 遍历图片imgFile添加到formFile里面
                                    $.each(imgFile, function (i, file) {
                                        formFile.append('files', file);
                                    });
                                    $.ajax({
                                        url: '/editActivity',
                                        type: 'POST',
                                        data: formFile,
                                        async: true,
                                        cache: false,
                                        contentType: false,
                                        processData: false,
                                        // traditional:true,
                                        dataType: 'json',
                                        success: function (res) {
                                            if (res.code === 0) {
                                                layer.msg(res.msg);
                                                activityTable.reload();
                                                layer.close(index);
                                            } else {
                                                layer.msg(res.msg)
                                            }
                                        },
                                        error: function (res) {
                                            console.log(res);
                                        }
                                    });
                                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                });
                            }
                        });
                    });
                }
            });
        });
    }
</script>
</html>